<template>
  <div id="biye1">
    <div class="step-one">
      <div class="s-title">毕业目标通用标准</div>
      <div class="s-content">
        <div>1. 有公开的、符合学校定位的、适应社会经济发展需要的毕业目标</div>
        <div>2. 定期评价毕业目标的合理性并根据评价结果对毕业目标进行修订，评价与修订过程有行业或企业专家参与。</div>
      </div>
    </div>
    <div class="step-two">
      <div class="s-title">
        <div>毕业目标</div>
        <div
          v-if="editTwo"
          @click="editGoal"
          class="s-btn"
        >完成</div>
        <div
          v-else
          @click="editTwo = true"
          class="s-btn"
        >编辑</div>
      </div>
      <el-input
        v-if="editTwo"
        class="s-input"
        type="textarea"
        rows="4"
        v-model="goalMessage"
      ></el-input>
      <div
        v-else
        class="s-content"
      >
        {{ goalMessage }}
      </div>
    </div>
    <div class="step-three">
      <div class="s-right">
        <div
          class="s-btn"
          @click="addNewRow"
        >
          <el-icon>
            <CirclePlus />
          </el-icon>
          毕业目标
        </div>
      </div>
      <el-table
        class="my-table"
        :data="tableData"
        style="width: 100%"
      >

        <el-table-column
          prop="address"
          label="分项"
          width="100"
        >
          <template #default="{ $index }">
            目标{{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="目标分解名称"
          width="250"
        >
          <template #default="{ row }">
            <el-input
              v-model="row.name"
              size="small"
              v-if="row.isEditing"
              maxlength="50"
              show-word-limit
            />
            <span v-else>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="目标分解内容"
        >
          <template #default="{ row }">
            <el-input
              v-if="row.isEditing"
              v-model="row.content"
              size="small"
              maxlength="500"
              show-word-limit
            />
            <span v-else>{{ row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column width="120">
          <template #default="{ row }">
            <div
              v-if="row.isEditing"
              class="table-btn"
            >
              <div @click="editTable(row)">
                <el-icon>
                  <Check />
                </el-icon>
              </div>
              <div @click="handleEditCancel(row)">
                <el-icon>
                  <Close />
                </el-icon>
              </div>
            </div>
            <div
              v-else
              class="table-btn"
            >
              <div @click="handleEdit(row)">编辑</div>
              <div @click="deleteTable(row)">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
  
  <script>
export default {
  components: {},
  data() {
    return {
      originalData: {},
      goalId: "",
      goalMessage: "",
      editTwo: false,
      goalMessage:
        "培养系统地掌握数学、自然科学基础知识和计算机科学与技术专业基础知识，具备较坚实的理论基础，获得计算加专业良好的科学思维和系统的工程训练，具备良好的分析问题解决问题的能力及良好外语运用能力，具有强烈的自主学习意识和创新意识，科学型和工程型相结合的计算机专业高级人才。",
      tableData: [],
    };
  },
  created() {
    this.getGoal();
    this.getTableList();
  },
  methods: {
    //获取毕业目标
    getGoal() {
      const url = "/tes/unauthorized/config";
      const params = {
        keys: "graduation_goal",
      };
      this.$axios
        .get(url, { params })
        .then((response) => {
          const res = response.data;
          this.goalId = res.graduation_goal[0].id;
          this.goalMessage = res.graduation_goal[0].keyValue;
        })
        .finally(() => {});
    },
    //修改毕业目标
    editGoal() {
      const loading = this.$loading({
        lock: true,
        text: "加载中...",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const url = "/tes/unauthorized/config";
      const data = [
        {
          id: this.goalId,
          keyWord: "graduation_goal",
          keyValue: this.goalMessage,
        },
      ];
      this.$axios
        .put(url, data)
        .then((response) => {
          const res = response;
          this.$message.success(res.message || "修改成功");
        })
        .finally(() => {
          this.editTwo = false;
          loading.close();
        });
    },
    //获取
    getTableList() {
      const url = "/tes/graduation/goal";
      this.$axios
        .get(url)
        .then((response) => {
          const res = response.data;
          this.tableData = res;
        })
        .finally(() => {});
    },

    // 添加新行
    addNewRow() {
      const newRow = {
        id: "",
        name: "",
        content: "",
        isEditing: true, // 新增行直接进入编辑模式
        isNew: true, // 标记为新行
      };
      this.tableData.push(newRow); // 添加到第一行，也可以用 push 添加到末尾
      // 不需要缓存原始数据，因为是全新的
    },
    handleEditCancel(row) {
      //修改
      if (row.id) {
        //恢复数据(第二个参数拷贝给第一个参数，也是浅拷贝)
        Object.assign(row, this.originalData[row.id]);
      }
      //添加
      else {
        this.tableData.splice(this.tableData.indexOf(row), 1); // 删除新增行
      }
      row.isEditing = false;
    },
    handleEdit(row) {
      //备份数据（{...row}浅拷贝）也可以用Object.assign({}, obj)
      this.originalData[row.id] = { ...row };
      row.isEditing = true;
    },
    //添加修改
    editTable(row) {
      const loading = this.$loading({
        lock: true,
        text: "数据加载中...",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const url = "/tes/graduation/goal";
      const data = {
        id: row.id,
        name: row.name,
        content: row.content,
      };
      this.$axios
        .post(url, data)
        .then((response) => {
          const res = response;
          this.$message.success(res.message || "请求成功");
          this.getTableList();
        })
        .finally(() => {
          loading.close();
          row.isEditing = false;
        });
    },
    //删除
    deleteTable(row) {
      this.$confirm("此操作将永久删除该条信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: "删除中...",
          background: "rgba(0, 0, 0, 0.7)",
        });
        const url = "/tes/graduation/goal";
        const params = {
          goalId: row.id,
        };
        this.$axios
          .delete(url, { params })
          .then((response) => {
            const res = response;
            this.$message.success(res.message || "删除成功");
            loading.close();
            this.getTableList();
          })
          .finally(() => {});
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#biye1 {
  background: #ffffff;
  box-shadow: 0px 0px 7px 0px rgba(70, 123, 235, 0.13);
  border-radius: 10px;
  border: 1px solid #ffffff;
  padding: 26px;
  box-sizing: border-box;
  .s-right {
    transform: translate(0px, 33px);
    position: relative;
    z-index: 9;
    display: flex;
    justify-content: flex-end;
    .el-icon {
      font-size: 20px;
    }
  }
  .s-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background: #457aff;
    border-radius: 4px;
    font-size: 14px;
    color: #ffffff;
    padding: 9px 15px;
    cursor: pointer;
    &:hover {
      background: #3a68c7;
    }
  }
  .step-one {
    margin-bottom: 37px;
    .s-title {
      font-size: 16px;
      color: #1e2c48;
      margin-bottom: 10px;
    }
    .s-content {
      font-size: 14px;
      color: #71778f;
      line-height: 24px;
    }
  }
  .step-two {
    margin-bottom: 60px;
    .s-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      color: #1e2c48;
      margin-bottom: 14px;
    }
    .s-content {
      font-size: 14px;
      color: #1e2c48;
      border-radius: 4px;
      border: 1px solid #ededed;
      padding: 15px 22px;
      line-height: 24px;
    }
    .s-input {
      :deep(.el-textarea__inner) {
        padding: 15px 22px;
        line-height: 24px;
        border-radius: 4px;
      }
    }
  }
  .step-three {
    .my-table {
      :deep(th) {
        .cell {
          font-weight: bold;
          font-size: 14px;
          color: #7a8cb0;
        }
      }
      :deep(td) {
        .el-input__inner {
          height: 32px;
          font-size: 14px;
        }
        .table-btn {
          display: flex;
          gap: 10px;
          > div {
            color: #457aff;
            cursor: pointer;
            .el-icon {
              font-size: 16px;
            }
            &:hover {
              color: #3a68c7;
            }
          }
        }
      }
    }
  }
}
</style>